class MpCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.render();
  }

  render() {
    const width = this.getAttribute("width") || "auto";
    const variant = this.getAttribute("variant") || "default";

    this.shadowRoot.innerHTML = `
        <link rel="stylesheet" href="./src/mp-design-tokens/components-styles/Card.css">
        <div style="width: ${width}" class="card card-${variant}">
          <slot></slot>
        </div>
      `;
  }
}

customElements.define("mp-card", MpCard);
